<script setup lang='ts'>
import { useDeleteJcMallSetting, useGetJcMallSettingList, useUpdateJcMallSettingType } from '@fl/api/man-api'
import FlUpload from '@fl/components/fl-upload.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrEditHome from './add-or-edit-home.vue'

const { createConfirmModal } = useMessage()

const { data, isLoading } = useGetJcMallSettingList()

const { isPending: updateTypeLoading, mutate: updateTypeMutate } = useUpdateJcMallSettingType()

const { isPending: deleteLoading, mutate: deleteMutate } = useDeleteJcMallSetting()

const visible = ref(false)

const id = ref<null | string>(null)

const typeEunm = {
    1: 'banner',
    2: 'introduce',
    3: 'brand',
    4: 'logo',
}

const statusEnum = {
    0: '隐藏',
    1: '显示',
}

const bannerList = ref<any>([])

const type = ref<number | undefined>(undefined)

const introduceList = ref<any>([])
const introduceSwitch = ref<boolean>(false)

const brandList = ref<any>([])
const brandSwitch = ref<boolean>(false)

const logoList = ref<any>([])
const logoSwitch = ref<boolean>(false)

function formatResult(arr: any[], type: string) {
    return arr.filter((item: any) => typeEunm[item.type] === type)[0]
}

function formatList(val: any) {
    return val?.items?.map((item: any) => {
        return {
            ...item,
        }
    }) || []
}

function formatSwitch(status: any) {
    return statusEnum[status] === '显示'
}

function changeIntroduceType() {
    changeType(2)
}

function changeBrandType() {
    changeType(3)
}

function changeLogoType() {
    changeType(4)
}

function changeType(type: 1 | 2 | 3 | 4) {
    updateTypeMutate(type, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

function removeFile(val: any, verify: boolean = false, arr: any[] = [], min: number = 1) {
    if (verify && arr.length <= min) {
        return ElMessage.warning(`此栏目至少需要${min}张图片`)
    }
    createConfirmModal({
        content: '是否确认删除？',
        onError: () => {

        },
        onSuccess: () => {
            deleteMutate(val.id, {
                onSuccess: () => {
                    ElMessage.success('操作成功')
                },
            })
        },
    })
}

function addBanner() {
    if (bannerList.value?.length >= 6) {
        return ElMessage.warning('主banner最多设置6张')
    }
    visible.value = true
    type.value = 1
}

function addIntroduce() {
    if (introduceList.value?.length >= 4) {
        return ElMessage.warning('平台介绍最多设置4张')
    }
    visible.value = true
    type.value = 2
}

function addBrand() {
    if (brandList.value?.length >= 15) {
        return ElMessage.warning('优选品牌最多设置15张')
    }
    visible.value = true
    type.value = 3
}

function editLogoItem(val) {
    console.log(val, 'val')
    id.value = val.id
    type.value = 4
    visible.value = true
}

const LogoKey = ref(1)

watchEffect(() => {
    if (data.value) {
        console.log('🚀 ~ watchEffect ~ data:', data)
        LogoKey.value++
        const result = cloneDeep(data.value)

        const bannerResult = formatResult(result, 'banner')
        bannerList.value = formatList(bannerResult)

        const introduceResult = formatResult(result, 'introduce')
        introduceList.value = formatList(introduceResult)
        introduceSwitch.value = formatSwitch(introduceResult?.status)

        const brandResult = formatResult(result, 'brand')
        brandList.value = formatList(brandResult)
        brandSwitch.value = formatSwitch(brandResult?.status)

        const logoResult = formatResult(result, 'logo')
        logoList.value = formatList(logoResult)
        logoSwitch.value = formatSwitch(logoResult?.status)
    }
})
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <div v-else
         v-loading="deleteLoading"
    >
        <ElCard shadow="never"
                mb-20
        >
            <template #header>
                <div class="flex justify-between items-center">
                    <div>
                        <span class="font-bold">主banner</span>

                        <span class="text-#ccc">(最少一张,最多设置六张)</span>
                    </div>

                    <div class="flex gap-20">
                        <ElButton @click="addBanner">
                            添加
                        </ElButton>
                    </div>
                </div>
            </template>

            <div class="mb-10 text-#ccc">
                建议尺寸：710*330px;格式支持：PNG、JPG、JPEG
            </div>

            <div class="flex flex-wrap gap-20">
                <div v-for="item in bannerList"
                     :key="item.id"
                     class="flex flex-col gap-10 w-22%"
                >
                    <FlUpload v-model="item.img"
                              accept=".jpg,.png,.jpeg"
                              :limit="1"
                              :file-size="20"
                              is-mall-admin
                              disabled
                              show-remove-icon
                              @remove="removeFile(item, true, bannerList, 1)"
                    />

                    <el-input v-model="item.img"
                              readonly
                    />
                </div>
            </div>
        </ElCard>

        <ElCard shadow="never"
                mb-20
        >
            <template #header>
                <div class="flex justify-between items-center">
                    <div>
                        <span class="font-bold">平台介绍</span>

                        <span class="text-#ccc">(最多4张)</span>
                    </div>

                    <div class="flex gap-20">
                        <ElButton @click="addIntroduce">
                            添加
                        </ElButton>

                        <el-switch v-model="introduceSwitch"
                                   :loading="updateTypeLoading"
                                   @click="changeIntroduceType"
                        />
                    </div>
                </div>
            </template>

            <div class="mb-10 text-#ccc">
                建议尺寸：366*228px;格式支持：PNG、JPG、JPEG
            </div>

            <div class="flex flex-wrap gap-20">
                <div v-for="item in introduceList"
                     :key="item.id"
                     class="flex flex-col gap-10 w-18%"
                >
                    <FlUpload v-model="item.img"
                              accept=".jpg,.png,.jpeg"
                              :limit="1"
                              :file-size="20"
                              is-mall-admin
                              disabled
                              show-remove-icon
                              @remove="removeFile(item)"
                    />

                    <el-input v-model="item.img"
                              readonly
                    />
                </div>
            </div>
        </ElCard>

        <ElCard shadow="never"
                mb-20
        >
            <template #header>
                <div class="flex justify-between items-center">
                    <div>
                        <span class="font-bold">优选品牌</span>

                        <span class="text-#ccc">(最多15张)</span>
                    </div>

                    <div class="flex gap-20">
                        <ElButton @click="addBrand">
                            添加
                        </ElButton>

                        <el-switch v-model="brandSwitch"
                                   :loading="updateTypeLoading"
                                   @click="changeBrandType"
                        />
                    </div>
                </div>
            </template>

            <div class="mb-10 text-#ccc">
                建议尺寸：366*228px;格式支持：PNG、JPG、JPEG
            </div>

            <div class="flex flex-wrap gap-20">
                <div v-for="item in brandList"
                     :key="item.id"
                     class="flex flex-col gap-10 w-18%"
                >
                    <FlUpload v-model="item.img"
                              accept=".jpg,.png,.jpeg"
                              :limit="1"
                              :file-size="20"
                              is-mall-admin
                              disabled
                              show-remove-icon
                              @remove="removeFile(item)"
                    />

                    <el-input v-model="item.name"
                              readonly
                    />
                </div>
            </div>
        </ElCard>

        <ElCard shadow="never">
            <template #header>
                <div class="flex justify-between items-center">
                    <div>
                        <span class="font-bold">企业供应商LOGO配置</span>
                    </div>

                    <div class="flex gap-20">
                        <el-switch v-model="logoSwitch"
                                   :loading="updateTypeLoading"
                                   @click="changeLogoType"
                        />
                    </div>
                </div>
            </template>

            <div class="mb-10 text-#ccc">
                logo图要求长384px、宽144px,比例16:6,分辨率72以上
            </div>

            <div class="flex flex-wrap justify-between">
                <div v-for="item, index in logoList"
                     :key="item.id"
                     class="mb-25 w-30%"
                >
                    <div class="flex gap-20">
                        <div class="pt-5">
                            供应商{{ index + 1 }}
                        </div>

                        <div class="flex-1">
                            <el-input v-model="item.name"
                                      readonly
                                      class="mb-20 flex-1"
                            >
                                <template #append>
                                    <Edit class="cursor-pointer"
                                          style="width: 1em; height: 1em;"
                                          @click="editLogoItem(item)"
                                    />
                                </template>
                            </el-input>

                            <FlUpload :key="item.img"
                                      v-model="item.img"
                                      accept=".jpg,.png,.jpeg"
                                      :limit="1"
                                      :file-size="20"
                                      is-mall-admin
                                      disabled
                            />
                        </div>
                    </div>
                </div>
            </div>
        </ElCard>
    </div>

    <AddOrEditHome :key="type"
                   v-model:id="id"
                   v-model:visible="visible"
                   v-model:type="type"
    />
</template>

<style lang="scss" scoped>
:deep(.el-upload-list--picture-card),
:deep(.el-upload--picture-card),
:deep(.el-upload-list__item),
:deep(.el-range-editor) {
    width: 100%;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 100%;
}
</style>
